<script setup>
import { computed } from 'vue';
/* 
  254 45 70
  245 102 1
  247 169 1

*/

const props = defineProps([
  "img",
  "rank",
  "name"
])

const color = computed(()=> {
  // 编写颜色代码
  if(props.rank == 1){
      return "rgb(254,45,70)"
  }else if(props.rank == 2){
      return "rgb(245,102,1)"
  }else{
    return "rgb(247,169,1)"
  }
})
</script>
<template>
    <div class="photo-wrp">
            <div class="photo">
                <img :src="props.img" :alt="props.name">
            </div>
            <span>{{props.rank}}</span>
        </div>
</template>
<style scoped>
.photo-wrp {
  width: 100px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
  
}
/* 图片 */
.photo img{
  width: 100%;
  vertical-align: top;
}
.photo-wrp span{
  position: absolute;
  top: 0;
  left: 0;
  background-color: v-bind(color);
  width: 20px;
  border-bottom-right-radius: 10px;
  text-align: center;
  font-weight: bold;
}

</style>